<template>
<view class="">
	<view class="list">
		<view class="nav" v-for="(nav,index) in navData" :key="nav.id" :data-index="index" @click="navBind">
			<view class="title">
				{{nav.title}}
			</view>
			<view :class=" index == navIndex?'content active':'content' ">
				{{nav.content}}
			</view>
		</view>
	</view>	
	<view v-if="navIndex!=1">
		精选/新品/热卖
	</view>
	<view v-if="navIndex == 1">社区</view>
</view>	

</template>

<script>
	export default {
		name:"one-vue",
		data() {
			return {
				navIndex:0,
				navData:[
					{
						id:1,
						title:"精选",
						content:"为你推荐"
					},{
						id:2,
						title:"社区",
						content:"新奇好物"
					},{
						id:3,
						title:"新品",
						content:"潮流上新"
					},{
						id:4,
						title:"热卖",
						content:"火热爆款"
					},
				]
			};
		},
		methods:{
			navBind(e){
				console.log(e.currentTarget.dataset.index);
				this.navIndex = e.currentTarget.dataset.index;
				console.log(this.navIndex);
			}
		}
	}
</script>

<style lang="less">
.list{
	width: 750rpx;
	display: flex;
	background-color: white;	
	padding: 20rpx 0rpx;
	.nav{
		width: 200rpx;
		text-align: center;
     	border-right: 1px solid #999999;
		.title{
			font-weight: 600;
		}
		.content{
			width: 130rpx;
			font-size: 12px;
			border-radius: 30rpx;
			margin-left: 20rpx;
			margin-top: 2px;
		}
		.active{
			background: linear-gradient(-88deg,#ff4f2e,#f91f28);
			color: #fff;
		}
	}
	.nav:last-child{
		border-right: none;
	}
}
</style>